<template>
  <ul class="search-category-wrapper">  
    <li class="category-item" v-for="(item, i) in categoryData" :key="i">
        <div class="category-item__wrapper" @click="gotoOtherPage(item)">
            {{item.heading}}
        </div>
    </li>
  </ul>
</template>

<script>
export default {
    name: 'SearchCategory',
    data(){
        return {
            categoryData: [
                {
                    heading: '歌手分类',
                    router: '/singer/list'
                },
                {
                    heading: '歌单广场'
                },
                {
                    heading: '电台'
                },
                {
                    heading: '排行榜'
                }
            ]
        }
    },
    methods: {
        gotoOtherPage(data){
            if(data.router){
                this.$router.push(data.router)
            }
            
        }
    },
    created(){

    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';

    .search-category-wrapper {
        padding: px2rem(10);

        .category-item {
            display: inline-block;
            width: 50%;
            padding: px2rem(4);
            box-sizing: border-box;
            .category-item__wrapper {
                color: #fff;
                border-radius: px2rem(8);
                padding: px2rem(6);
                height: px2rem(54);
                font-size: px2rem(16);
                background-color: rgb(247, 138, 123);
                cursor: pointer;
            }
        }
    }
</style>